import React, { PureComponent } from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import GroupGridItem from './GroupGridItem'
import screen from '../../../../common/screen'
type Props = {
    infos: Array,//拼团数据
    onPressItem: Function,//点击拼团商品事件
    onPressMore: Function,//点击拼团更多事件
}


class GroupGridView extends PureComponent<>{
    render() {
        return (
            //onPress={this.props.onPressMore('超值拼团')}
            //当有数据的时候显示拼团数据
            this.props.infos.length > 0 ?
                <View>
                    <TouchableOpacity  onPress={()=>this.props.onPressMore()}>
                        <Image source={require('../../../../img/home/group_recommend.png')} style={styles.icon} />
                    </TouchableOpacity>
                    <LinearGradient colors={['#f84c74', '#f95d82', '#f57291', '#fa859f', '#f89aac']} style={styles.contain}>
                        {this.props.infos.map((item, i) => (
                            <GroupGridItem
                                info={item}
                                key={i}
                                OnPress={this.props.onPressItem}
                            />
                        ))}
                    </LinearGradient>
                </View>
                : <View ></View>
        );
    }
}
const styles = StyleSheet.create({
    contain: {
        flexDirection: 'row',
      //  justifyContent: 'center',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: screen.width,
        height: screen.width * 0.45,
        paddingLeft:8,
        paddingRight: 8,
    },
    icon: {
        width: screen.width *0.45,
        height: screen.width * 0.07,
        marginTop: 10,
        justifyContent:'center',
        alignSelf: 'center',
        backgroundColor: 'white',
        resizeMode: 'contain',
    },
})
export default GroupGridView